<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>订单管理</title>
    <link rel="stylesheet" href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">


</head>
<body>

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">贝丁网</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="menu-item"><a href="/ua/manager">管理员菜单</a></li>
                <li class="menu-item"><a href="/ua/logout">退出</a></li>
            </ul>
        </div>
    </div>
</nav>

<%--弹窗--%>
<div class="modal fade" id="changeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                </h4>
            </div>
            <div class="modal-body form-wrapper">


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary form-submit">
                    提交
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<style>

    .navbar {
        z-index: 100;
    }

    .containerT {
        text-align: center;
        position: absolute;
        top: 60px;
        left: 50%;
        border-radius: 5%;
        background-color: rgba(255, 255, 255, 0.78);
        transform: translate(-50%, 0);
        padding: 20px;
        max-width: 100%;
        width: fit-content;
    }

    body {
        background-color: #e8e9f5
    }


</style>


<script src="//cdn.staticfile.org/jquery/2.1.0/jquery.js"></script>
<script src="//cdn.staticfile.org/jquery.form/4.2.2/jquery.form.min.js"></script>


<style>

    .mypanel {
        display: none;
    }

    .active {
        display: block;
    }

    .key {
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        /*  -webkit-line-clamp: 1;*/
    }

    .value {
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        /*-webkit-line-clamp: 1;*/
    }

</style>

<div class="containerT">

    <div class="mypanel title active">


        <h4>
            订单管理
        </h4>

        <table class="table">

            <%--展示当前--%>

            <tbody>


            <tr>

                <td>
                    <span class="key">
                    平台费率
                    </span>
                </td>
                <td>
                    <span class="value platformCostRate">
                    </span>
                </td>
                <td>
                    <a class="platformCostRate bt">修改</a>
                </td>

            </tr>


            </tbody>

        </table>


        <script>


            //执行回调
            let callback;

            $('.form-submit').click(function () {

                //进行表单提交
                $('.form-wrapper form').ajaxSubmit(function (r) {

                    callback(r);

                    $('#changeModal').modal('hide');
                }).error(function () {
                    alert('修改失败');
                    $('#changeModal').modal('hide');
                });

            });


            function t2d(t) {

                let d = {
                    s: 0,
                    m: 0,
                    h: 0,
                    d: 0
                };

                //对时间进行四级换算

                //首先转为s
                t /= 1000;

                if (t < 1) {
                    return d;
                }

                d.s = t % 60;

                //将剩下的转换为分钟
                t = (t - d.s) / 60;

                if (t < 1) {
                    return d;
                }

                d.m = t % 60;

                //t为小时数
                t = (t - d.m) / 60;

                if (t < 1) {
                    return d;
                }


                d.h = t % 24;

                //剩下的为天数
                t = (t - d.h) / 24;

                if (t < 1) {
                    return d;
                }


                d.d = t;

                return d;

            }


            function d2t(d) {
                return 1000 * (d.s + d.m * 60 + d.h * 60 * 60 + d.d * 60 * 60 * 24);
            }


            function formit(d) {

                let ds = '';

                if (d.d) {
                    ds += d.d + '天';
                }

                if (d.h) {
                    ds += d.h + '小时';
                }

                if (d.m) {
                    ds += d.m + '分钟';
                }

                if (d.s) {
                    ds += d.s + '秒';
                }

                return ds;

            }


            //从后端获取各种等待时长,插入容器内

            $.post('/order/manager/timeout-get', function (ls) {

                //追加元素
                for (let i in ls) {

                    let d = t2d(ls[i].value);

                    $('.containerT table tbody').append(' <tr>\n' +
                        '\n' +
                        '                <td>\n' +
                        '                    <span class="' + ls[i].item + ' key">\n' +

                        ls[i].name +

                        '                    </span>\n' +
                        '                </td>\n' +
                        '                <td>\n' +
                        '                    <span class="' + ls[i].item + '  value">\n' +

                        formit(d) +

                        '                    </span>\n' +
                        '                </td>\n' +
                        '                <td>\n' +
                        '                    <a class="' + ls[i].item + ' timeout-bt" item=' + ls[i].item + ' style="float: right">修改</a>\n' +
                        '                </td>\n' +
                        '\n' +
                        '            </tr>');


                    $('.timeout-bt.' + ls[i].item).click(function () {

                        let wrapper = $('.form-wrapper');

                        wrapper.empty();

                        callback = function (r) {

                            $('.value.' + ls[i].item).text(formit(t2d(r)));

                        };

                        wrapper.append($('.timeout-form').clone());

                        $('#myModalLabel').text(ls[i].name);

                        $('.form-wrapper .item-input').val(ls[i].item);

                        let timeoutI = $('.form-wrapper .timeout-input');

                        let day = $('.form-wrapper .day-i');
                        let hour = $('.form-wrapper .hour-i');
                        let min = $('.form-wrapper .min-i');
                        let second = $('.form-wrapper .second-i');

                        day.val(d.d);
                        hour.val(d.h);
                        min.val(d.m);
                        second.val(d.s);

                        let t = ls[i].value;

                        $('.form-wrapper .time-i').bind('input', function () {

                            d.d = parseInt(day.val() ? day.val() : 0);
                            d.h = parseInt(hour.val());
                            d.m = parseInt(min.val());
                            d.s = parseInt(second.val());

                            timeoutI.val(d2t(d));

                        });


                        $('#changeModal').modal('show');

                    });


                }


            });


            //获取平台费率进行填充
            $.post('/order/manager/platformCostRate-get', function (r) {

                $('.platformCostRate.value').text(r);

                //绑定修改按钮
                $('.platformCostRate.bt').click(function () {

                    let wrapper = $('.form-wrapper');

                    wrapper.empty();

                    callback = function (r) {

                        $('.value.platformCostRate').text(r);

                    };

                    wrapper.append($('.platformCostRate-form').clone());

                    $('#myModalLabel').text('修改平台费率');

                    $('#changeModal').modal('show');

                });

            });


        </script>

    </div>

</div>

<style>
    form input {
        border: 2px solid rgba(132, 132, 132, 0.5);
        text-align: center;
    }

    form label {
        width: 100%;
    }

    form table {
        table-layout: fixed;
        width: 100%;
    }

    form select {
        border: 2px solid rgba(132, 132, 132, 0.5);
        width: 50%;
        text-align: center;
        /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
        /*很关键：将默认的select选择框样式清除*/
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        /*在选择框的最右侧中间显示小箭头图片*/
        /*background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll rightright center transparent;
        */
        /*为下拉小箭头留出一点位置，避免被文字覆盖*/
        /*padding-right: 14px;*/

    }

    /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
    select::-ms-expand {
        display: none;
    }


</style>

<div style="display: none" class="hide-forms">

    <div class="platformCostRate-form">

        <form action="/order/manager/platformCostRate-set" method="post">
            <label>
                <input name="platformCostRate" class="platformCostRate-input" placeholder="平台费率" type="number">
            </label>
        </form>

    </div>


    <div class="timeout-form">

        <form action="/order/manager/timeout-set" method="post">


            <%--天,小时,分钟,秒最终由这三个数字进行换算--%>


            <table>
                <tr>
                    <td>
                        <input unit="d" class="time-i day-i" style="width: 50%;" type="number" value="0">
                        天
                    </td>

                    <td>
                        <select unit="h" class="time-i hour-i">

                        </select>
                        小时
                    </td>

                    <td>
                        <select unit="m" class="time-i min-i">

                        </select>
                        分钟
                    </td>

                    <td>
                        <select unit="s" class="time-i second-i">


                        </select>
                        秒
                    </td>

                </tr>
            </table>


            <input type="hidden" class="item-input" name="item">
            <input name="time" class="timeout-input" type="hidden">
        </form>

    </div>


    <script>


        let rateRegex = /0(\.\d{1,5})*$/;

        $(document).on('input', '.platformCostRate-input', function (ip) {
            if (!rateRegex.test(ip.target.value)) {
                alert('费率区间[0,1),精确到小数点后5位');
                ip.target.value = '';
            }

        });

        let t60 = $('.min-i,.second-i');

        for (let i = 0; i < 60; i++) {

            t60.append($('<option>').val(i).text(i));

        }

        let t24 = $('.hour-i');

        for (let i = 0; i < 24; i++) {
            t24.append($('<option>').val(i).text(i));
        }

        //首先将表单中的所有

    </script>


</div>


<script src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


</body>

</html>